<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>吃货餐厅</title>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/default/easyui.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/demo/demo.css"></link>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	 /*<![CDATA[*/ 
	            
	var msglen=0;
	            
	
	function refresh()
	 {
		 document.getElementById("msg_end").scrollIntoView(); 
		
	 }
	 
	 function getMsg()
	 {
		 
		 var curlen=0;
		 var url = "p_getMsgLen?deskid="+$("#deskid").val();
		 $.ajax(
		 			{
		 	        	url: url,
		 	        	async: false,//改为同步方式
		 	        	type: "GET",
		 	        	success: function (data) {
		 	        		 curlen=Number(data);
		 	 			}
		 	 	});
		 
		
		 
		 var diff= curlen-msglen;
		 if(diff>0)
		 {
			 for(i=0;i<diff;i++)
			 {
			     var j=msglen+i;
				 var url = "p_getMsg?deskid="+$("#deskid").val()+"&index="+j;
				 
				 $.ajax(
				 			{
				 	        	url: url,
				 	        	async: false,//改为同步方式
				 	        	type: "GET",
				 	        	success: function (data) {
				 	        		 if(data!='null')
									 {
				 	        			 var name;
				 	        			 var val;
				 	        			 var text1;
				 	        			 
                                         var arr = data.split("|");
                                         var ctime="<span style=\"color: #7B7B7B;font-size: 15px;font-family:'微软雅黑';\">"+arr[1]+"</span>"
                                         if(arr[0]=='0')
                                         {
                                        	 
                                			 name="<span style=\"color: #009900;font-size: 25px;font-family:'微软雅黑';\">"+$("#desknum").val()+"号桌</span>"
                                		     val="<span style=\"font-size: 20px;font-family:'微软雅黑';\">"+arr[2]+"</span>"
                                			 text1="<table width=\"100%\"><tr><td align=\"left\">"+name+"&nbsp;&nbsp;"+ctime+"</td></tr><tr><td align=\"left\">&nbsp;&nbsp;&nbsp;&nbsp;"+val+"</td></tr></table>"
                                         }else
                                         {
                                        	 name="<span style=\"color: #B8860B;font-size: 25px;font-family:'微软雅黑';\">服务员</span>"
        								     val="<span style=\"font-size: 20px;font-family:'微软雅黑';\">"+arr[2]+"</span>"
        									 text1="<table width=\"100%\"><tr><td align=\"right\">"+ctime+"&nbsp;&nbsp;"+name+"</td></tr><tr><td align=\"right\">"+val+"&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>"
                                         }
										 
										 $("#chatdiv").append(text1);   
										 document.getElementById("msg_end").scrollIntoView(); 
										
									 }
				 	 			}
				 	 	});
				
			 }
			 msglen=curlen;
		 }
		 
		 
		  setTimeout(function(){getMsg();}, 1000);
	 }
	 
	 function sendmsg()
	 {
		 var text = $("#chatbtn").val();
		 if(text.length==0)
			 return;
		
		 var msg = encodeURIComponent(text);
		 
		 var url = "p_addMsg?deskid="+$("#deskid").val()+"&msg="+msg+"&flag=1";
		  $.get(url, function(data){

		  });
		 
		 $("#chatbtn").textbox("setValue", "");
		 $('#chatbtn').textbox('textbox').focus();
	 }
	
	$(document).ready(function()
	{
		

		  $('#foodname').textbox('textbox').keydown(function (e) {
			  clickQuery();
		  });
		   
		 
		  
		  var dsh=(self.parent.gh-(self.parent.gh*0.12)-410)/2;
		  var dsw=(self.parent.gw-(self.parent.gw*0.12)-430)/2;
		  $('#pdlg').window('open').window('resize',{width:'430px',height:'410x',top: dsh,left:dsw});
		  
		
		  
		 
		  $('#ndlg').window('open').window('resize',{width:'200px',height:'250px',top: dsh,left:dsw+430});

		  
		  $('#ndlg').dialog('close');
		  $('#pdlg').dialog('close');
		 
		
		
		$(window).resize(function() {
			 setTimeout(function(){refresh();}, 100);
		});
		
		setTimeout(function(){getMsg();}, 1000);
		
		var name = "与"+$("#desknum").val()+"号桌聊天中";
		$('#panel').panel({title: name});
	
		 $("#chatbtn").textbox({onClickButton:function(e){
			 sendmsg();
		  }});	
		 
		 //按回车发送
		 $("#chatbtn").textbox('textbox').bind('keypress', function (e) {
	     	if (e.keyCode == 13) 
	     	{ 
	     		sendmsg();         
			}
		 });
		 
		 
	 });
	
	function showchar()
	 {
        var deskid=$("#deskid").val();
        var url ="showCar?deskid="+deskid;
		 $.get(url, function(data){
			if(data.total!="0")
			{
				var foot = data.footer;
				fsum = foot[0].price;
				
				$("#ptable").datagrid("loadData", data);
			}else
			{
				var json = $.parseJSON("{\"total\":0,\"rows\":[],\"footer\":[]}");
				$("#ptable").datagrid("loadData", json);
			}
			
		 });
	 }
	
	var gdeskid;
	function openDetail()
	 {

		 var deskid = $("#deskid").val();
		 var desknum = $("#desknum").val();
		 var deskname=$("#deskname").val();
		 
		 var url = "p_show_carlist?deskid="+deskid;
		 
		 $("#pdlg").panel({title:desknum+"号桌订单"});
		 showchar();
		 
		 
		 $('#pdlg').dialog('open');
	 }
	
	function removeCar(id,orderid)
	 {
		 var url = "del_order?id="+id+"&orderid="+orderid;
		  
		  $.get(url, function(data){
			  showchar();
		  });
	 }
	
	function formatColumn(val,row){
		 if(row.id=='sum')
			 {
			 		return '<input type="button" value="结算" onclick="overCar(\''+val+'\')" />';
			 }else
			 {
				 	return '<a href="#"  onclick="removeCar(\''+val+'\',\''+row.orgid+'\')">撤单</a>';
			 }
			
		
	}
	
	 function shishou_enter()
	 {     
	       if (event.keyCode == 13) 
	       {   
	    	   var yingshou = $('#yingshou').text();
	    	   var shishou = $('#shishou').val();
	    	   var zhaoling = parseFloat(shishou)-parseFloat(yingshou);
	    	  
	    	   $('#zhaoling').focus();
	    	   $('#zhaoling').val(zhaoling);
	    	   
	    	   
	       }
	 }
	 
	 function zhaoling_enter()
	 {     
	       if (event.keyCode == 13) 
	       {   
	    	   $('#queding').focus();
	       }
	 }
	 
	 var gid;
	 function overCar(id)
	 {
		 $('#pdlg').dialog('close');
		 $('#order').dialog('open');
		 $('#yingshou').html(fsum);
		 
		 $('#zhaoling').val("");
		 $('#shishou').val("");
		 
		 setTimeout(function(){
			
			 $('#shishou').focus();
			 
		 }, 100);
		 
		 
		 gid=id;
	 }
	 
	
	 
	
	 var fsum;
	 function over()
	 {
		 $('#order').dialog('close');
		 var deskid =$('#deskid').val();
		 var desknum = $('#desknum').val();
		 var url = "over_order?id="+gid+"&deskid="+deskid+"&sum="+fsum;
		  
		  $.get(url, function(data){
			  
			  
			  $('#ndlg').dialog('close');
			  $('#pdlg').dialog('close');
			  
			  
		  });
	 }
	
	 function close()
	 {
		 $("#foodname").textbox("setValue","");
		 var json = $.parseJSON("[]");
		 $("#add").datagrid("loadData", json);
	 }
	 
	 function cellclick(index, field){
         if(field=='score')
         {
       		$('#add')
 				.datagrid('beginEdit', index);
       		flag=1;
         }else
         {
        	 $('#add')
				.datagrid('endEdit', index);
         }
    }
	 
	 function onClickRow(index,rowdata)
	 {
			 var deskid=$("#deskid").val();
			 var url = "add_order?foodid="+rowdata.id+"&deskid="+deskid+"&count="+rowdata.score+"&flag=1";
			  $.ajax(
			 			{
			 	        	url: url,
			 	        	async: false,//改为同步方式
			 	        	type: "GET",
			 	        	success: function (data) {
			 	        		 showchar();
			 	 			}
			 	 	});
		 
		 
	 }
	 
	 
	 function opendlg()
	 {
		 $('#ndlg').dialog('open');
		 $('#foodname').textbox('textbox').focus(); 
	 }
	 
	 function clickQuery()
	 {
		 var tmp = encodeURIComponent($('#foodname').val());
		  var name = $.trim(tmp);  
		  if(name.length==0)
			  return;
		  var url = "getFoodByLike?foodname="+name;
		  $.get(url, function(data){
			  	$("#add").datagrid("loadData", data);
				
				$("#count").html(data.length);
			});
	 }
	 
	 function cellclick2(index, field){
         if(field=='count')
         {
       		$('#ptable')
 				.datagrid('beginEdit', index);
         }else
         {
        	 $('#ptable')
				.datagrid('endEdit', index);
         }
    }
	 
	 function afterEdit(rowIndex,rowdata,changes)
	 {
		    var url ="updateCount?id="+rowdata.orderid+"&count="+rowdata.count;
		    $.get(url, function(data){
		    	showchar();
			});
	 }
	 
	/*]]>*/  
	</script>
	
	<style type="text/css">

	
	.fo{
		font-size: 25px;font-family:'微软雅黑';font-weight: bold;
	}
	.fo1{
		font-size: 25px;font-family:'微软雅黑';font-weight: bold;color: #009900;
		
	}
	
	.fo2{
		font-size: 25px;font-family:'微软雅黑';font-weight: bold;color: #ff0000;
		
	}
	.bo{
		border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;
		font-size: 25px;font-family:'微软雅黑';font-weight: bold;
		color: #009900;
		width:80px;
		height:30px;
	}
	.bo1{
		border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;
		font-size: 25px;font-family:'微软雅黑';font-weight: bold;
		color: #ff0000;
		width:80px;
		height:30px;
	}
</style>
</head>
<body>
   
	<div class="easyui-panel" id="panel" title="聊天中" style="width:500px;overflow:auto;height:500px;" data-options="footer:'#footer',tools:'#tt'"> 
     		<div id="chatdiv" style="overflow:hidden;width:100%;padding:5px;"></div> 
     		<div id="msg_end" style="height:0px; overflow:hidden"></div> 
     </div> 
    
    <div id="footer">
     <input class="easyui-textbox"  id="chatbtn" style="width:497px;height:40px;" data-options="prompt:'按Enter发送',buttonText:'&nbsp;&nbsp;&nbsp;&nbsp;发 &nbsp;&nbsp;&nbsp;&nbsp;送 &nbsp;&nbsp;&nbsp;&nbsp;'"/>
	</div>
	
	<div id="tt">
		<a href="javascript:void(0)" class="icon-add" onclick="openDetail()"></a>
	</div>
	
	
	<div id="pdlg" class="easyui-dialog" data-options="modal:true,closed:true" style="width:400px;height:400px;">
			
	  <table id="ptable" class="easyui-datagrid" style="width:100%;height:100%;"
			data-options="singleSelect:true,collapsible:false,showFooter: true,rownumbers: true,onClickCell:cellclick2,onAfterEdit:afterEdit,toolbar:'#tb'">
			<thead>
			<tr>
				<th data-options="field:'foodname'" width="30%">菜名</th>
				<th data-options="field:'price'" width="20%">价格</th>
				<th data-options="field:'count',editor:{type:'numberspinner',options:{min:1}}" width="20%">数量</th>
				<th data-options="field:'orderid',align:'right',formatter:formatColumn" width="30%">操作</th>

			</tr>
			</thead>
	</table>
	
	</div>
	
	<div id="tb" style="padding:2px 5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="opendlg()">新增菜单</a>
	</div>
	
	<div id="ndlg" class="easyui-dialog" title="新增菜单" data-options="iconCls:'icon-save',onClose:close,closed:true">
		<table id="add" class="easyui-datagrid"  style="width:100%;height:100%;" 
			data-options="singleSelect:true,collapsible:false,onDblClickRow: onClickRow,onClickCell:cellclick,toolbar:'#tt1'">
			<thead>
				<tr>
					<th data-options="field:'foodname'" width="50%">菜名</th>
					<th data-options="field:'price'" width="20%">价格</th>
					<th data-options="field:'score',align:'left',editor:{type:'numberspinner',options:{min:1}}" width="30%">数量</th>

				</tr>
			</thead>
		</table>
	</div>

	<div id="tt1" style="padding:2px 5px;">
		
		<input class="easyui-textbox" data-options="prompt:'输入查询'" name ="foodname"  id="foodname" style="width:100px"/>
		<span id="count"></span>
		
	</div>
	
	<div class="easyui-dialog" data-options="closed:true,title:'结账'" id="order" width="300px" height="200px">
		<center>
			<table>
				<tr>
					<td class="fo">应收：&nbsp;</td>
					<td align="left"><span class="fo1" id="yingshou"></span></td>
				</tr>
				<tr>
					<td class="fo">实收：&nbsp;</td>
					<td ><input class="bo" type="text" id="shishou" style="text-align: left;" onkeypress="shishou_enter()"/></td>
				</tr>
				<tr>
					<td class="fo">找零：&nbsp;</td>
					<td align="left"><input class="bo1" type="text" id="zhaoling" style="text-align: left;" onkeypress="zhaoling_enter()"/></td>
				</tr>
				
				<tr>
					<td colspan="2" align="center"><input height="50px" type="button" onclick="over()" id="queding" value="&nbsp;&nbsp;结 &nbsp;&nbsp;&nbsp;&nbsp;账&nbsp;&nbsp;"/></td>
				</tr>
			</table>
		</center>
	</div>
	
	
	<input  id="deskid" type="hidden" th:value="${deskid}" />
	<input  id="desknum" type="hidden" th:value="${desknum}" />
	<input  id="deskname" type="hidden" th:value="${deskname}" />
	
</body>
</html>